<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>景区监测</title>
    <link rel="icon" type="image/x-icon" href="../../images/logo.png">
    <link rel="stylesheet" href="../../plugin/M_select/js/M_select/M_select.css">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/scenicDetail.css">
</head>

<body>
    <div class="box">
        <!-- 头部 -->
        <div class="header-box">
                <img src="../../images/headeBg.png" alt="">
                <div class="weather-box">
                    <span>郑州 小雨转多云 32/16℃</span>
                </div>
                <h1 class="header-title"><img src="../../images/header.png" alt=""></h1>
                <div class="header-action">
                    <span class="action-time"></span>
                    <a href="javascript:;">管理中心</a>
                    <a href="javascript:;">退出</a>
                </div>
            </div>
        <div class="main-box">
            <!-- 侧边导航 -->
            <ul class="aside-box">
                    <li>
                        <a href="../home.html">
                            <span>
                                <img class="aside-img" src="../../images/home.png" alt="">
                                <img class="aside-imgA " src="../../images/homeA.png" alt="">
                                首页
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../surroundings/development.html">
                            <span>
                                <img class="aside-img" src="../../images/huanjing.png" alt="">
                                <img class="aside-imgA" src="../../images/huanjingA.png" alt="">
                                产业发展环境
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../basic/basic.html">
                            <span>
                                <img class="aside-img" src="../../images/yaosu.png" alt="">
                                <img class="aside-imgA" src="../../images/yaosuA.png" alt="">
                                产业基础要素
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../passengerFlow/destination.html">
                            <span>
                                <img class="aside-img" src="../../images/keliu.png" alt="">
                                <img class="aside-imgA" src="../../images/keliuA.png" alt="">
                                旅游客流监测
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../productTesting/index.html">
                            <span>
                                <img class="aside-img" src="../../images/chanpin.png" alt="">
                                <img class="aside-imgA" src="../../images/chanpinA.png" alt="">
                                旅游产品监测
                            </span>
                        </a>
                    </li>
                    <li class="active">
                            <a href="./scenicMonitor.html">
                                <span>
                                    <img class="aside-img" src="../../images/qiye.png" alt="">
                                    <img class="aside-imgA" src="../../images/qiyeA.png" alt="">
                                    旅游企业监测
                                </span>
                            </a>
                        </li>
                    <li>
                        <a href="../tourismProject/index.html">
                            <span>
                                <img class="aside-img" src="../../images/xiangmu.png" alt="">
                                <img class="aside-imgA" src="../../images/xiangmuA.png" alt="">
                                旅游项目监测
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="../brand/brand.html">
                            <span>
                                <img class="aside-img" src="../../images/pinpai.png" alt="">
                                <img class="aside-imgA" src="../../images/pinpaiA.png" alt="">
                                旅游品牌监测
                            </span>
                        </a>
                    </li>
                </ul>
            <!-- 主题内容 -->
            <div class="content-box flex-between">
                <!-- 左侧 -->
                <div class="left-box">
                    <!-- 旅游资源 -->
                    <div class="top">
                        <div class="title-box">
                            <h3>
                                景区监测>少林寺景区
                            </h3>
                        </div>
                        <div>
                            <div class="top-item-box">
                                <div class="chart-title">
                                    <h3>实时在园人数(万人)</h3>
                                    <p><span>0</span><span>0</span><span>5</span>,<span>5</span><span>6</span><span>0</span>
                                    </p>
                                </div>
                                <div class="chart-box" id="chart5-1-1"></div>
                                <p>景区客流饱和度68%</p>
                            </div>
                            <div class="top-item-box">
                                <div class="chart-title">
                                    <h3>实时在园人数(万人)</h3>
                                    <p><span>0</span><span>1</span><span>2</span>,<span>6</span><span>3</span><span>5</span>
                                    </p>
                                </div>
                                <div class="chart-box" id="chart5-1-2"></div>
                                <p>去年同期接待人数</p>
                            </div>
                            <div class="top-item-box">
                                <div class="chart-title">
                                    <h3>实时在园人数(万人)</h3>
                                    <p><span>0</span><span>0</span><span>5</span>,<span>5</span><span>6</span><span>0</span>
                                    </p>
                                </div>
                                <div class="chart-box" id="chart5-1-3"></div>
                                <p>门票销量同比增长率</p>
                            </div>
                            <div class="top-item-box">
                                <div class="chart-title">
                                    <h3>实时在园人数(万人)</h3>
                                    <p><span>0</span><span>0</span><span>5</span>,<span>5</span><span>6</span><span>0</span>
                                    </p>
                                </div>
                                <div class="chart-box" id="chart5-1-4"></div>
                                <p>景区客流饱和度68%</p>
                            </div>
                        </div>

                    </div>
                    <div class="bottom">
                        <div>
                            <div class="title-box">
                                <h3>
                                    <img src="../../images/titile-img.png" alt="">
                                    热力图
                                </h3>
                            </div>
                            <div class="action-box">
                                <div class="select-box">
                                    <select name="" id="select-time" class="time">
                                        <option value="">2019-08-28</option>
                                        <option value="">2019-09-28</option>
                                        <option value="">2019-10-28</option>
                                    </select>
                                </div>
                                <div class="time-list-box">
                                    <div><i></i><span>07</span></div>
                                    <div><i></i><span>08</span></div>
                                    <div><i></i><span>09</span></div>
                                    <div><i></i><span>10</span></div>
                                    <div><i></i><span>11</span></div>
                                    <div><i></i><span>12</span></div>
                                    <div><i></i><span>13</span></div>
                                    <div class="active"><i></i><span>14</span></div>
                                    <div><i></i><span>15</span></div>
                                    <div><i></i><span>16</span></div>
                                    <div><i></i><span>17</span></div>
                                    <div><i></i><span>18</span></div>
                                    <div><i></i><span>19</span></div>
                                    <div><i></i><span>20</span></div>
                                </div>
                            </div>
                            <div class="map-box" id="mapall"></div>
                        </div>
                        <div>
                            <div class="title-box">
                                <h3>
                                    <img src="../../images/titile-img.png" alt="">
                                    视频监控
                                </h3>
                            </div>
                            <div class="video-box">
                                <video src="http://139.129.111.136/in1/templates/wechatmanage/image/2.mp4" controls></video>
                            </div>
                            <div class="video-box">
                                <video src="http://139.129.111.136/in1/templates/wechatmanage/image/1.mp4" controls></video>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- 右侧 -->
                <div class="right-box">
                    <div class="top">
                        <div class="title-box flex-between-center">
                            <h3>
                                <img src="../../images/titile-img.png" alt="">
                                客流同比
                            </h3>
                            <div class="tab-box">
                                <a href="javascript:;" class="active">本周</a>
                                <a href="javascript:;">一个月</a>
                                <a href="javascript:;">自定义
                                    <input type="text" value="08-22">至<input type="text" value="08-28">
                                </a>
                            </div>
                        </div>
                        <div class="chart-box" id="chart5-2"></div>
                    </div>
                    <div class="bottom">
                        <div>
                            <div class="title-box">
                                <h3>
                                    <img src="../../images/titile-img.png" alt="">
                                    景区客流分时段趋势
                                </h3>
                            </div>

                            <div class="chart-box" id="chart5-3"></div>
                        </div>
                        <div>
                            <div class="title-box">
                                <h3>
                                    <img src="../../images/titile-img.png" alt="">
                                    门票收入
                                </h3>
                            </div>
                            <div class="all-chart-box ">
                                <div class="chart-hd" id="chart5-4-1"></div>
                                <div class="chart-hd" id="chart5-4-2"></div>
                                <div id="chart5-4-3"></div>
                            </div>
                            <div class="change-box">
                                <div class="line-box"></div>
                                <ul>
                                    <li>
                                        <i></i>
                                        <span>2017</span>
                                    </li>
                                    <li>
                                        <i></i>
                                        <span>2018</span>
                                    </li>
                                    <li class="active">
                                        <i></i>
                                        <span>2019</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>

    </div>
    <script src="../../plugin/jquery-1.11.1.min.js"></script>
    <script src="../../plugin/ECharts/echarts.js"></script>
    <script src="../../plugin/ECharts/china.js"></script>
    <script src="../../plugin/M_select/js/M_select/M_select.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/scenicDetail.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=pBO5rztesPMh94cAbzoQAKKq3Rk1xCw3"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

</body>

</html>